<template>
  <div>
    <onboardingGuide
      :step="1"
      :show="onboardingGuideShow"
      :rect="onboardingGuideRect"
    ></onboardingGuide>
    <card
      class="flex rela"
      :width="1400"
      height="calc(100vh - 68px - 18px - 30px)"
      style="overflow: hidden"
    >
      <!-- 教学 -->
      <div
        v-loading="loading"
        class="teaching transitionAnimations"
        :style="{ width: (msgExpandAnimate ? 1050 : 1400) + 'px' }"
      >
        <!-- 标题 -->
        <div class="top_Title">
          <div style="display: flex; align-items: center">
            <div class="course_name">
              <img
                class="course_icon"
                src="@/assets/images/group_icon/course_icon.png"
                alt="加载失败"
              />
              <div style="display: flex">
                《
                <div
                  class="overTxt text"
                  :style="{ maxWidth: msgExpandAnimate ? '200px' : 'auto' }"
                >
                  <tooltip
                    position="top"
                    :text="courseInfo.courseName"
                    width="100%"
                  />
                </div>
                》
              </div>
            </div>
            <div @click="routeTo('/teachIndex', 1)" class="class_name">
              <img
                src="@/assets/images/group_icon/turn_class_icon.png"
                alt="加载失败"
              />
              <div
                class="overTxt text"
                :style="{ width: msgExpandAnimate ? '90px' : 'auto' }"
              >
                <tooltip
                  position="top"
                  :text="courseInfo.schedulingName"
                  width="100%"
                />
              </div>
            </div>
          </div>
          <div class="btns">
            <div class="toggleBtn">
              <div class="toggleText">任务视图</div>
              <el-switch
                style="display: block"
                v-model="switchValue"
                :active-value="0"
                :inactive-value="1"
                active-color="#13ce66"
                inactive-color="#D1D1D1 "
                size="mini"
              >
              </el-switch>
            </div>
            <div class="selectBtns" v-if="switchValue == 0">
              <!--            <div v-if="groupType==1" style="font-size: 14px;font-weight: 500;color: #28B28B;margin-right: 8px">-->
              <!--              当前平均成绩   {{classAvgScore}}分-->
              <!--            </div>-->
              <div class="toggleBtn" v-if="courseInfo.includeGroupExam">
                <div class="toggleText">小组模式</div>
                <el-switch
                  style="display: block"
                  v-model="teachGroupType"
                  :active-value="2"
                  :inactive-value="1"
                  active-color="#13ce66"
                  inactive-color="#D1D1D1 "
                  size="mini"
                >
                </el-switch>
              </div>
              <el-select
                style="width: 100px; margin-right: 8px"
                v-model="studentNameSearch"
                placeholder="学生姓名"
                clearable
                filterable
                size="small"
              >
                <el-option
                  v-for="item in studentSearchList"
                  :key="item.studentId"
                  :label="item.name"
                  :value="item.studentId"
                />
              </el-select>
              <el-select
                v-if="teachGroupType == 1 && activeNode.examId"
                @change="sortTeachStudent"
                style="width: 100px; margin-right: 8px"
                v-model="teachStudentSort"
                placeholder="排序规则"
                filterable
                size="small"
              >
                <el-option
                  v-for="(item) in teachSortList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <el-select
                v-if="teachGroupType == 1 && !activeNode.examId"
                @change="sortTeachStudent"
                style="width: 100px; margin-right: 8px"
                v-model="teachStudentSort"
                placeholder="排序规则"
                filterable
                size="small"
              >
                <el-option
                  v-for="(item) in teachSortList2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <el-select
                v-if="teachGroupType == 2 && activeNode.examId"
                @change="sortGroup"
                style="width: 100px; margin-right: 8px"
                v-model="GroupListSort"
                placeholder="排序规则"
                filterable
                size="small"
              >
                <el-option
                  v-for="item in groupSortList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <el-select
                v-if="teachGroupType == 2 && !activeNode.examId"
                @change="sortGroup"
                style="width: 100px; margin-right: 8px"
                v-model="GroupListSort"
                placeholder="排序规则"
                filterable
                size="small"
              >
                <el-option
                  v-for="item in groupSortList2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
            <div class="selectBtns" v-if="switchValue == 1">
              <!--            <div v-if="groupType==1" style="font-size: 14px;font-weight: 500;color: #28B28B;margin-right: 8px">-->
              <!--              当前平均成绩   {{classAvgScore}}分-->
              <!--            </div>-->
              <div class="toggleBtn" v-if="courseInfo.includeGroupExam">
                <div class="toggleText">小组模式</div>
                <el-switch
                  style="display: block"
                  v-model="groupType"
                  :active-value="2"
                  :inactive-value="1"
                  active-color="#13ce66"
                  inactive-color="#D1D1D1 "
                  size="mini"
                >
                </el-switch>
              </div>
              <el-select
                style="width: 100px; margin-right: 8px"
                v-model="studentNameSearch"
                placeholder="学生姓名"
                clearable
                filterable
                size="small"
              >
                <el-option
                  v-for="item in studentSearchList"
                  :key="item.studentId"
                  :label="item.name"
                  :value="item.studentId"
                />
              </el-select>
              <el-select
                @change="searchStudent"
                style="width: 100px; margin-right: 12px"
                v-model="studentListSort"
                placeholder="排序规则"
                filterable
                size="small"
              >
                <el-option
                  v-for="item in sortList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
            <div
              style="margin-right: 6px"
              v-if="
                courseInfo.includeGroupExam &&
                courseInfo.finishStatus == 0 &&
                $store.getters.roleId == 'teacher'
              "
              class="addStudent"
              @click="routeTo('/groupSetup')"
            >
              <el-tooltip placement="top" effect="dark" content="小组设置">
                <img
                  :style="{ marginRight: msgExpandAnimate ? 0 : '8px' }"
                  src="@/assets/images/group_icon/group.svg"
                  alt="加载失败"
                />
              </el-tooltip>
              <div
                class="text"
                :style="{ width: msgExpandAnimate ? 0 : 'auto' }"
              >
                小组设置
              </div>
            </div>

            <div
              style="margin-right: 6px"
              ref="studentScore"
              class="addStudent"
              v-if="courseInfo.finishStatus == 0"
              @click="handleViewStudentScore"
            >
              <el-tooltip placement="top" effect="dark" content="学生得分">
                <img
                  :style="{ marginRight: msgExpandAnimate ? 0 : '8px' }"
                  src="@/assets/images/group_icon/studentScore.png"
                  alt="加载失败"
                />
              </el-tooltip>
              <div
                class="text"
                :style="{ width: msgExpandAnimate ? 0 : 'auto' }"
              >
                学生得分
              </div>
            </div>

            <el-popover placement="bottom-start" width="220" trigger="hover">
              <div>
                <!-- 查看学生成果 -->
                <div class="addStudent1" @click="viewStudyResult">
                  <img
                    :style="{ marginRight: '8px' }"
                    src="@/assets/images/group_icon/view.png"
                    alt="加载失败"
                  />

                  <div class="text" :style="{ width: 'auto' }">
                    查看学生成果
                  </div>
                </div>
              </div>

              <!-- 添加学员 -->
              <div
                v-if="courseInfo.finishStatus == 0"
                class="addStudent1"
                @click="showAddStu"
              >
                <img
                  :style="{ marginRight: '8px' }"
                  src="@/assets/images/group_icon/add_person_icon.png"
                  alt="加载失败"
                />

                <div class="text" :style="{ width: 'auto' }">添加学员</div>
              </div>
              <!-- 助教 -->
              <div
                v-if="courseInfo.finishStatus == 0"
                class="addStudent1"
                @click="showAssistant"
              >
                <img
                  :style="{ marginRight: '8px' }"
                  src="@/assets/images/group_icon/assistant_icon.png"
                  alt="加载失败"
                />

                <div class="text" :style="{ width: 'auto' }">助教管理</div>
              </div>
              <!--作业考核成果导出-->
              <div
                class="addStudent1"
                @click="handleOpenExport(1)"
              >
                <img
                  :style="{ marginRight: '8px' }"
                  src="@/assets/images/group_icon/export_icon.png"
                  alt="加载失败"
                />

                <div class="text" :style="{ width: 'auto' }">导出课后作业</div>
              </div>
              <div
                class="addStudent1"
                @click="handleOpenExport(2)"
              >
                <img
                  :style="{ marginRight: '8px' }"
                  src="@/assets/images/group_icon/export_icon.png"
                  alt="加载失败"
                />

                <div class="text" :style="{ width: 'auto' }">导出考核</div>
              </div>
              <div
                class="addStudent1"
                @click="handleOpenExport(3)"
              >
                <img
                  :style="{ marginRight: '8px' }"
                  src="@/assets/images/group_icon/export_icon.png"
                  alt="加载失败"
                />

                <div class="text" :style="{ width: 'auto' }">导出成果</div>
              </div>
              <!-- 结束课程 -->
              <div
                v-if="courseInfo.finishStatus == 0"
                class="addStudent1"
                @click="finishCourse"
              >
                <img
                  :style="{ marginRight: '8px' }"
                  src="@/assets/images/group_icon/finish_icon.png"
                  alt="加载失败"
                />

                <div class="text" :style="{ width: 'auto' }">结束课程</div>
              </div>
              <div
                v-if="courseInfo.finishStatus == 1"
                class="addStudent1"
                @click="appraiseStudent"
              >
                <img
                  :style="{ marginRight: '8px' }"
                  src="@/assets/images/group_icon/evaluate_icon.png"
                  alt="加载失败"
                />
                <div class="text" :style="{ width: 'auto' }">评价学生</div>
              </div>
              <div
                v-if="$store.getters.roleId == 'teacher'"
                class="addStudent"
                slot="reference"
                style="margin-right: 8px"
              >
                <img
                  :style="{ marginRight: msgExpandAnimate ? 0 : '8px' }"
                  src="@/assets/images/studyResults/more.png"
                  alt="加载失败"
                />
                <div
                  class="text"
                  :style="{ width: msgExpandAnimate ? 0 : 'auto' }"
                >
                  更多
                </div>
              </div>
            </el-popover>

            <div
              class="expandIcon shou rela"
              v-if="msgExpandAnimate == false"
              @click="handleExpandMsg(true)"
            >
              <img class="icon" src="@/assets/images/msg_expand.png"/>
              <div class="expandIcon_num absolute" v-if="notRead > 0">
                {{ notRead }}
              </div>
            </div>
          </div>
        </div>
        <!--任务视图-->
        <div v-if="switchValue == 0" class="course_teach">
          <div class="left" id="left">
            <div class="topLine">
              <div class="course_title">{{ courseInfo.courseName }}</div>
              <div @click="handlechange" class="btns">
                <img
                  v-if="!isClose"
                  src="@/assets/images/courseAdd/expand.png"
                  alt="加载失败"
                />
                <img
                  v-else
                  src="@/assets/images/courseAdd/shrink.png"
                  alt="加载失败"
                />
                {{ !isClose ? '展开' : '收起' }}
              </div>
            </div>
            <div class="course_tree">
              <courseTeachTree
                ref="course_trees_ref"
                :data="courseTeachTree"
                @handleClick="ClickTeachNode"
                :isClose="isClose"
                :activeNode.sync="activeNode"
              >
              </courseTeachTree>
            </div>
          </div>
          <div class="resize" id="resize" title="收缩侧边栏"></div>
          <div class="right" id="right">
            <div
              v-if="activeNode.type != 3 && activeNode.type != 4"
              class="teachEmpty"
            >
              <el-empty description="暂无学生信息"></el-empty>
            </div>
            <div v-else style="width: 100%; height: 100%">
              <div class="topTips">
                注：点击按钮查看试卷，点击卡片查看学习详情
              </div>
              <!--              学生模式-->
              <div
                v-if="teachGroupType == 1 && stepStudentList.length > 0"
                class="stepStudent_list"
                v-loading="teachStudentLoading"
              >
                <div
                  :key="index"
                  v-for="(item, index) in stepStudentList"
                  :class="{
                    stepStudent_item: true,
                    open_margin: true,
                    light_bg: item.studentId == studentNameSearch,
                  }"
                  :id="`stu_${item.studentId}`"
                  @click.stop="toModule(item)"
                >
                  <div
                    class="last_name"
                    :style="{
                      'background-color':
                        item.studyStatus == '0' ? '#e5e5e5' : item.bgColor,
                    }"
                  >
                    <img
                      :src="studentRankImg[item.scoreRank]"
                      class="TopBorder"
                      v-if="item.scoreRank && item.scoreRank < 6"
                    />
                    {{ item.studentName.slice(0, 1) }}
                  </div>
                  <div class="item_top">
                    <div class="student_name overTxt">
                      {{ item.studentName }}
                    </div>
                    <div class="student_num overTxt">{{ item.studentNum }}</div>
                  </div>
                  <div class="item_bottom">
                    <div v-if="!activeNode.examId">
                      <!--                      todo:确认状态-->
                      <el-tooltip placement="top" width="200">
                        <div slot="content">该内容无考核</div>
                        <div
                          v-if="item.studyStatus == 0 || item.studyStatus == 1"
                          class="bottom_button not_start cursor_default"
                          @click.stop
                        >
                          未开始
                        </div>
                      </el-tooltip>
                      <el-tooltip placement="top" width="200">
                        <div slot="content">该内容无考核</div>
                        <div
                          v-if="item.studyStatus == 2"
                          class="bottom_button finish cursor_default"
                          @click.stop
                        >
                          已完成
                        </div>
                      </el-tooltip>
                    </div>
                    <div v-else>
                      <div
                        v-if="item.examStatus == 0 || item.examStatus == 4"
                        class="bottom_button not_start"
                        @click.stop
                      >
                        考核：未开始
                      </div>
                      <div
                        v-if="item.examStatus == 2 && !item.examFlag"
                        class="bottom_button on_exam"
                      >
                        进行中
                        <span v-if="item.duration > 0">
                          ：{{ item.remainingTime || 0 }}/{{ item.duration }}:00
                        </span>
                      </div>
                      <el-tooltip
                        placement="top"
                        width="200"
                        v-if="item.examStatus == 3 || item.examFlag == 3"
                      >
                        <div
                          class="bottom_button to_corrected"
                          @click.self.stop="toExamPaper(item, 1)"
                        >
                          待批改
                        </div>
                        <div slot="content">
                          待
                          <span v-if="item.teacherScoreFlag"> 教师</span>
                          <span v-if="item.selfScoreFlag"> 自己</span>
                          <span v-if="item.leaderScoreFlag"> 组长</span>
                          <span v-if="item.otherGroupScoreFlag"> 其他小组</span
                          >批改
                        </div>
                      </el-tooltip>

                      <div
                        v-if="item.examStatus == 1"
                        class="bottom_button finish"
                        @click.self.stop="toExamPaper(item, 2)"
                      >
                        考核：{{ item.score }}
                      </div>
                      <div
                        v-if="item.examStatus == -1"
                        class="bottom_button fail_exam"
                        @click.self.stop="toExamPaper(item, 2)"
                      >
                        考核：{{ item.score }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!--              小组模式-->
              <div
                v-if="teachGroupType == 2 && stepGroupList.length > 0"
                class="stepGroup_list"
                v-loading="teachGroupLoading"
              >
                <div
                  style="width: 100%"
                  v-for="(groupItem, groupIndex) in stepGroupList"
                  :key="groupIndex"
                >
                  <div class="group_total">
                    <img
                      :src="groupRankImg[groupItem.scoreRank]"
                      v-if="groupItem.scoreRank && groupItem.scoreRank < 4"
                    />
                    <img
                      v-if="
                        groupIndex % 2 != 0 &&
                        (!groupItem.scoreRank || groupItem.scoreRank >= 4)
                      "
                      src="../assets/images/group_icon/orange_group_icon.png"
                      alt="加载失败"
                    />
                    <img
                      v-if="
                        groupIndex % 2 == 0 &&
                        (!groupItem.scoreRank || groupItem.scoreRank >= 4)
                      "
                      src="@/assets/images/group_icon/purple_group_icon.png"
                      alt="加载失败"
                    />

                    <div>
                      {{ groupItem.groupName }}
                      <span v-if=" groupItem.groupName != '未分组' && activeNode.examId"
                            :class="groupIndex % 2 == 0 ? 'purple_txt' : 'orange_txt'"
                      >考核平均分
                        {{ groupItem.avgScore ? groupItem.avgScore.toFixed(2) : 0 }}
                        分
                      </span>
                      <span v-if="groupItem.submitType == 2">
                        <span
                          v-if="groupItem.examStatus == 3"
                          class="tocorrectedText"
                          @click.self.stop="toExamPaper(groupItem, 3)"
                        >待批改
                          <img src="@/assets/images/toCorrectedIcon.png" class="toCorrectedIcon"/>
                        </span>
                        <span
                          v-if="groupItem.examStatus == 0 || groupItem.examStatus == 4"
                          class="notStartText"
                          @click.stop
                        >考核：未开始
                        </span>
                        <span v-if="groupItem.examStatus == 1 && !groupItem.examFlag" class="onExamText" @click.stop>
                          进行中
                          <template v-if="item.duration > 0">
                            ： {{ groupItem.remainingTime || 0 }}/{{
                              groupItem.duration
                            }}:00
                          </template>
                        </span>
                        <span v-if="groupItem.examStatus == 2" class="finishText"
                              @click.self.stop="toExamPaper(groupItem, 4)"
                        >查看试卷</span>
                      </span>
                    </div>
                  </div>
                  <div
                    v-if="groupItem.courseTeachingStudentStudyList.length > 0"
                    class="group_student_all"
                  >
                    <div
                      :id="`stu_${item.studentId}`"
                      :class="{
                        stepStudent_item: true,
                        group_open_margin: true,
                        light_bg: item.studentId == studentNameSearch,
                      }"
                      v-for="(
                        item, index
                      ) in groupItem.courseTeachingStudentStudyList"
                      :key="index"
                      @click.stop="toModule(item)"
                    >
                      <div
                        class="last_name"
                        :style="{
                          'background-color':
                            item.studyStatus == '0' ? '#e5e5e5' : item.bgColor,
                        }"
                      >
                        <img
                          :src="studentRankImg[item.scoreRank]"
                          class="TopBorder"
                          v-if="item.scoreRank && item.scoreRank < 6"
                        />
                        {{ item.studentName.slice(0, 1) }}
                      </div>
                      <div class="item_top">
                        <div class="student_name overTxt">
                          {{ item.studentName }}
                        </div>
                        <div class="student_num overTxt">
                          {{ item.studentNum }}
                        </div>
                        <div class="tags_icon">
                          <img
                            v-if="groupItem.leaderId == item.studentId"
                            src="@/assets/images/group_icon/tags_icon.png"
                            alt="加载失败"
                          />
                        </div>
                      </div>
                      <div class="item_bottom" v-if="groupItem.submitType != 2">
                        <div v-if="!activeNode.examId">
                          <el-tooltip placement="top" width="200">
                            <div slot="content">该内容无考核</div>
                            <div
                              v-if="
                                item.studyStatus == 0 || item.studyStatus == 1
                              "
                              class="bottom_button not_start cursor_default"
                              @click.stop
                            >
                              未开始
                            </div>
                          </el-tooltip>
                          <el-tooltip placement="top" width="200">
                            <div slot="content">该内容无考核</div>
                            <div
                              v-if="item.studyStatus == 2"
                              class="bottom_button finish cursor_default"
                              @click.stop
                            >
                              已完成
                            </div>
                          </el-tooltip>
                        </div>
                        <div v-else>
                          <div
                            v-if="item.examStatus == 0 || item.examStatus == 4"
                            class="bottom_button not_start"
                            @click.stop
                          >
                            考核：未开始
                          </div>
                          <div
                            v-if="item.examStatus == 2 && !item.examFlag"
                            class="bottom_button on_exam"
                            @click.stop
                          >
                            进行中<span v-if="item.duration > 0">：{{ item.remainingTime || 0 }}/{{
                              item.duration
                            }}:00
                            </span>
                          </div>
                          <el-tooltip
                            placement="top"
                            width="200"
                            v-if="item.examStatus == 3 || item.examFlag == 3"
                          >
                            <div
                              class="bottom_button to_corrected"
                              @click.self.stop="toExamPaper(item, 1)"
                            >
                              待批改
                            </div>
                            <div slot="content">
                              待
                              <span v-if="item.teacherScoreFlag"> 教师</span>
                              <span v-if="item.selfScoreFlag"> 自己</span>
                              <span v-if="item.leaderScoreFlag"> 组长</span>
                              <span v-if="item.otherGroupScoreFlag">
                                其他小组</span
                              >批改
                            </div>
                          </el-tooltip>
                          <div
                            v-if="item.examStatus == 1"
                            class="bottom_button finish"
                            @click.self.stop="toExamPaper(item, 2)"
                          >
                            考核：{{ item.score }}
                          </div>
                          <div
                            v-if="item.examStatus == -1"
                            class="bottom_button fail_exam"
                            @click.self.stop="toExamPaper(item, 2)"
                          >
                            考核：{{ item.score }}
                          </div>
                        </div>
                      </div>
                      <div class="item_bottom" v-if="groupItem.submitType == 2">
                        <div v-if="!activeNode.examId">
                          <el-tooltip placement="top" width="200">
                            <div slot="content">该内容无考核</div>
                            <div
                              v-if="item.studyStatus == 0"
                              class="notStartText cursor_default"
                              @click.stop
                            >
                              未开始
                            </div>
                          </el-tooltip>
                          <el-tooltip placement="top" width="200">
                            <div slot="content">该内容无考核</div>
                            <div
                              v-if="item.studyStatus == 2"
                              class="finishText cursor_default"
                              @click.stop
                            >
                              已完成
                            </div>
                          </el-tooltip>
                        </div>
                        <div v-else>
                          <div
                            v-if="
                              (!item.examPaperId ||
                                item.examStatus == 4 ||
                                item.examStatus == 0) &&
                              !(item.examStatus == 1 || item.examStatus == -1)
                            "
                            class="notStartText"
                            @click.stop
                          >
                            考核：未开始
                          </div>
                          <div
                            v-if="item.examStatus == 2 && !item.examFlag"
                            class="onExamText"
                            @click.stop
                          >
                            进行中<span v-if="item.duration > 0">：{{ item.remainingTime || 0 }}/{{
                              item.duration
                            }}:00</span>
                          </div>
                          <el-tooltip
                            placement="top"
                            width="200"
                            v-if="item.examStatus == 3 || item.examFlag == 3"
                          >
                            <div
                              class="tocorrectedText"
                              @click.self.stop="toExamPaper(item, 1)"
                            >
                              待批改
                            </div>
                            <div slot="content">
                              待
                              <span v-if="item.teacherScoreFlag"> 教师</span>
                              <span v-if="item.selfScoreFlag"> 自己</span>
                              <span v-if="item.leaderScoreFlag"> 组长</span>
                              <span v-if="item.otherGroupScoreFlag">
                                其他小组</span
                              >批改
                            </div>
                          </el-tooltip>
                          <div
                            v-if="item.examStatus == 1"
                            class="bottom_button finish"
                            @click.self.stop="toExamPaper(item, 2)"
                          >
                            考核：{{ item.score }}
                          </div>
                          <div
                            v-if="item.examStatus == -1"
                            class="bottom_button fail_exam"
                            @click.self.stop="toExamPaper(item, 2)"
                          >
                            考核：{{ item.score }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div v-else class="empty_stu">
                    <div>
                      <el-empty description="暂无学生~"></el-empty>
                    </div>
                  </div>
                </div>
              </div>
              <div class="float_window">
                <el-tooltip content="内容详情" placement="left">
                  <div class="float_item" @click="CourseDetail">
                    <img src="@/assets/images/detailIcon.png"/>
                  </div>
                </el-tooltip>
                <el-tooltip content="数据统计" placement="left">
                  <div class="float_item" @click="DataAnalysis">
                    <img src="@/assets/images/chartIcon.png"/>
                  </div>
                </el-tooltip>
                <el-tooltip content="倒计时" placement="left">
                  <div class="float_item" @click="Countdown">
                    <img src="@/assets/images/timeIcon.png"/>
                  </div>
                </el-tooltip>
              </div>
            </div>
          </div>
        </div>
        <!--学生情况-->
        <div v-if="switchValue == 1">
          <!-- 正常模式 -->
          <template v-if="groupType == 1">
            <div v-if="studentList.length > 0" class="student_list">
              <div
                :id="`stu_${item.studentId}`"
                :class="{
                  close_margin: !msgExpandAnimate,
                  open_margin: msgExpandAnimate,
                  light_bg: item.studentId == studentNameSearch,
                }"
                class="student_item"
                @click="toModule(item)"
                v-for="(item, index) in studentList"
                :key="index"
              >
                <div
                  class="last_name"
                  :style="{
                    'background-color':
                      item.studyStatus == '0' ? '#e5e5e5' : item.bgColor,
                  }"
                >
                  {{ item.studentName.slice(0, 1) }}
                </div>
                <div class="item_top">
                  <div class="student_name overTxt">{{ item.studentName }}</div>
                  <div class="student_num overTxt">{{ item.studentNum }}</div>
                </div>
                <div class="item_mid">
                  <div class="mid_task overTxt">
                    {{ item.ancestorsName[0] }}
                  </div>
                  <div class="mid_task_next overTxt">
                    {{ item.ancestorsName[1] }}
                  </div>
                  <div class="mid_content overTxt">
                    {{ item.ancestorsName[2] }}
                  </div>
                </div>
                <div class="item_bottom">
                  <el-progress
                    :percentage="item.progressRate"
                    color="#ffcd7c"
                    define-back-color="#ebebeb"
                    :stroke-width="4"
                  ></el-progress>
                </div>
              </div>
            </div>
            <div v-else style="margin-top: 80px">
              <el-empty description="暂无学生~"></el-empty>
            </div>
          </template>
          <!-- 小组模式 -->
          <template v-if="groupType == 2">
            <div class="group_student_list" v-if="groupStudyList.length > 0">
              <div
                style="width: 100%"
                v-for="(groupItem, groupIndex) in groupStudyList"
                :key="groupIndex"
              >
                <div class="group_total">
                  <img
                    v-if="groupIndex % 2 != 0"
                    src="../assets/images/group_icon/orange_group_icon.png"
                    alt="加载失败"
                  />
                  <img
                    v-if="groupIndex % 2 == 0"
                    src="@/assets/images/group_icon/purple_group_icon.png"
                    alt="加载失败"
                  />
                  <div>
                    {{ groupItem.groupName }}
                    <span
                      v-if="groupItem.groupName != '未分组'"
                      :class="groupIndex % 2 == 0 ? 'purple_txt' : 'orange_txt'"
                    >当前平均成绩
                      {{
                        groupItem.avgScore ? groupItem.avgScore.toFixed(2) : 0
                      }}
                      分</span
                    >
                  </div>
                </div>
                <div
                  v-if="groupItem.ccCourseGroupMemberList.length > 0"
                  class="group_student_all"
                >
                  <div
                    :id="`stu_${item.studentId}`"
                    :class="{
                      group_close_margin: !msgExpandAnimate,
                      group_open_margin: msgExpandAnimate,
                      light_bg: item.studentId == studentNameSearch,
                    }"
                    class="student_item"
                    @click="toModule(item)"
                    v-for="(item, index) in groupItem.ccCourseGroupMemberList"
                    :key="index"
                  >
                    <div
                      class="last_name"
                      :style="{
                        'background-color':
                          item.studyStatus == '0' ? '#e5e5e5' : item.bgColor,
                      }"
                    >
                      {{ item.studentName.slice(0, 1) }}
                    </div>
                    <div class="item_top">
                      <div class="student_name overTxt">
                        {{ item.studentName }}
                      </div>
                      <div class="student_num overTxt">
                        {{ item.studentNum }}
                      </div>
                      <div class="tags_icon">
                        <img
                          v-if="groupItem.leaderId == item.studentId"
                          src="@/assets/images/group_icon/tags_icon.png"
                          alt="加载失败"
                        />
                      </div>
                    </div>
                    <div class="item_mid">
                      <div class="mid_task overTxt">
                        {{ item.ancestorsName[0] }}
                      </div>
                      <div class="mid_task_next overTxt">
                        {{ item.ancestorsName[1] }}
                      </div>
                      <div class="mid_content overTxt">
                        {{ item.ancestorsName[2] }}
                      </div>
                    </div>
                    <div class="item_bottom">
                      <el-progress
                        :percentage="item.progressRate"
                        color="#ffcd7c"
                        define-back-color="#ebebeb"
                        :stroke-width="4"
                      ></el-progress>
                    </div>
                  </div>
                </div>
                <div v-else class="empty_stu">
                  <div>
                    <el-empty description="暂无学生~"></el-empty>
                  </div>
                </div>
              </div>
            </div>
            <div v-else style="margin-top: 80px">
              <el-empty description="暂无分组~"></el-empty>
            </div>
          </template>
        </div>
      </div>
      <!-- 待办 -->
      <div
        v-loading="msgLoading"
        class="toDo transitionAnimations absolute"
        :style="{
          right: (msgExpandAnimate ? 0 : -385) + 'px',
        }"
      >
        <div
          class="expandIcon absolute shou"
          style="z-index: 5; left: -16px; top: 22px"
          @click="handleExpandMsg(false)"
        >
          <img
            class="icon"
            src="@/assets/images/msg_expand.png"
            style="transform: rotateY(180deg)"
          />
        </div>

        <div class="toDo_titleRow flexBet">
          <div class="toDo_title rela">
            待办事项
            <div class="toDoNum absolute" v-if="notRead > 0">{{ notRead }}</div>
            <img
              v-if="notRead > 0"
              @click="clearUnread"
              class="clear_all_icon"
              src="@/assets/images/clear_all_icon.png"
              alt="加载失败"
            />
          </div>
          <div class="flex toDo_more shou flex" @click="toAllBacklog">
            查看全部事项
          </div>
        </div>
        <div
          style="
            height: calc(100vh - 68px - 18px - 71px - 31px);
            overflow: auto;
          "
          class="pad_10"
        >
          <div
            @click="msgRouteTo(item)"
            class="msg_item"
            v-for="(item, index) in msgList"
            :key="index"
          >
            <div class="msg_icon">
              <div
                v-if="item.readStatus == 0 || item.readStatus == false"
                class="redtip"
              ></div>
              <div v-if="item.msgType == 0">
                <img
                  v-if="item.examType == 1 || item.examType == 6"
                  src="@/assets/images/classify/msgtype0.png"
                  alt="加载失败"
                />
                <img
                  v-if="item.examType == 2"
                  src="@/assets/images/classify/msgtype3.png"
                  alt="加载失败"
                />
                <img
                  v-if="!item.examType"
                  src="@/assets/images/classify/msgtype0.png"
                  alt="加载失败"
                />
              </div>
              <img
                v-if="item.msgType == 4"
                src="@/assets/images/classify/msgtype0.png"
                alt="加载失败"
              />
              <img
                v-if="item.msgType == 7"
                src="@/assets/images/classify/msgtype6.png"
                alt="加载失败"
              />
            </div>
            <div class="msgInfo">
              <div class="flex_bt">
                <div class="msgName" v-if="item.msgType == 7">
                  <span v-html="item.title"></span>
                </div>
                <div class="msgName" v-if="item.msgType == 4">
                  <span v-html="item.title"></span>
                </div>
                <div class="msgName" v-if="item.msgType == 0">
                  <b v-if="!item.title"
                  >{{ item.senderNickName }}({{ item.senderName }})</b
                  >
                  <b v-if="item.title">{{ item.title }}</b>
                </div>
                <div v-if="item.createTime" class="create_time">
                  <div>{{ parseTime(item.createTime).split(' ')[0] }}</div>
                  <div>{{ parseTime(item.createTime).split(' ')[1] }}</div>
                </div>
              </div>

              <div
                class="msgDetail"
                v-if="item.msgType == 4 || item.msgType == 0"
              >
                {{ item.content ? item.content : '暂无内容' }}
              </div>
              <div class="msgDetail flexBet" v-if="item.msgType == 7">
                <span>{{ item.content ? item.content : '暂无内容' }}</span>
                <div>
                  <el-button
                    type="primary"
                    size="small"
                    v-if="item.surveyUserId != null"
                    @click="answerQuestion(item.keyId, item.surveyUserId)"
                  >去查看
                  </el-button>
                  <el-button
                    type="primary"
                    size="small"
                    v-if="item.surveyUserId == null"
                    @click="answerQuestion(item.keyId, item.surveyUserId)"
                  >去填写
                  </el-button>
                </div>
              </div>
            </div>
          </div>
          <div v-if="msgList.length == 0">
            <el-empty
              style="margin-top: 90px"
              description="暂无事项~"
            ></el-empty>
          </div>
        </div>
      </div>
    </card>
    <!-- 显示 预警 广泛使用 -->
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="lookDia"
      :title="lookTitle"
      width="528px"
    >
      <div style="height: 15px"></div>
      <div>
        {{ lookRuleForm.title }}
      </div>
      <div style="margin-top: 10px">
        {{ lookRuleForm.content }}
      </div>
      <div style="height: 30px"></div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="lookDia = false"
        >确定
        </el-button>
      </div>
    </el-dialog>
    <!--  添加学员  -->
    <el-dialog
      style="margin-top: 15vh"
      title="添加学员"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible="addStuDialog"
      width="500px"
      append-to-body
      @close="cancel()"
    >
      <el-form
        ref="addStuForm"
        :model="addStuForm"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="学员" prop="studentIds">
          <el-cascader
            placeholder="请选择学员"
            size="small"
            filterable
            :show-all-levels="false"
            :options="students"
            :props="{
              emitPath: false,
              multiple: true,
              label: 'allName',
              value: 'studentId',
              children: 'children',
            }"
            v-model="addStuForm.studentIds"
          ></el-cascader>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button @click="addStudentList" type="primary">确 认</el-button>
      </div>
    </el-dialog>
    <!--  助教管理  -->
    <el-dialog
      style="margin-top: 15vh"
      title="助教管理"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible="assistantDialog"
      width="500px"
      append-to-body
      @close="cancelAssistant()"
    >
      <el-form
        v-loading="assistantLoading"
        ref="assistantFormRef"
        :model="assistantForm"
        :rules="assistantFormRules"
        label-width="80px"
      >
        <el-form-item label="课程名称">
          <div>
            《{{ courseInfo.courseName }}》({{ typeText[courseInfo.type] }})
          </div>
        </el-form-item>
        <el-form-item label="授课班级">
          <div>{{ courseInfo.schedulingName }}</div>
        </el-form-item>
        <el-form-item label="助教" prop="assistantIds">
          <el-select
            filterable
            style="width: 304px"
            multiple
            collapse-tags
            placeholder="可搜索：可选择教师/学生账号"
            v-model="assistantForm.assistantIds"
          >
            <el-option
              v-for="(item, index) in assistantList"
              :key="index"
              :disabled="item.disabled"
              :label="item.labelName"
              :value="item.userId"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAssistant">取 消</el-button>
        <el-button
          @click="addAssistant"
          :loading="assistantLoading"
          type="primary"
        >确 认
        </el-button>
      </div>
    </el-dialog>
    <!-- 平时分组件 -->
    <usuallyDialog
      :courseSchedulingId="courseInfo.courseSchedulingId"
      :openType="openType"
      :open.sync="usuallyDialogOpen"
    ></usuallyDialog>
    <appraiseDialog
      :avgScore="classAvgScore"
      :open.sync="appraiseStudentOpen"
      :courseInfo="courseInfo"
    >
    </appraiseDialog>
    <!-- 学习成果 -->
    <div class="studyResult">
      <el-dialog
        top="1vh"
        title="学习成果"
        width="1250px"
        :visible.sync="studyResultByTime_open"
      >
        <div class="flex">
          <div
            style="
              max-height: calc(94vh - 60px - 200px + 40px);
              width: 310px;
              overflow: auto;
            "
          >
            <courseTrees
              ref="resultTree"
              :data="studyResultByTime_courseIndexTree"
              @handleClick="handleClick"
            >
            </courseTrees>
          </div>

          <!-- 学习成果 -->
          <div style="width: 872px">
            <studyResultByTime
              :className="courseInfo.schedulingName"
              formatter="byHour"
              type="edit"
              :courseId="courseInfo.courseId"
              ref="studyResultByTimeDia"
              @close="studyResultByTime_open = false"
            ></studyResultByTime>
          </div>
        </div>
      </el-dialog>
    </div>
    <!--    课程教学状态抽屉-->
    <teachDrawer
      :show.sync="teachDrawerShow"
      :type="teachDrawerType"
      :selectedId.sync="activeNodeIndex"
      :selectedType="activeNode.type"
      :courseId="courseInfo.courseId"
      :courseSchedulingId="courseInfo.courseSchedulingId"
      :includeGroupExam="courseInfo.includeGroupExam"
    ></teachDrawer>
    <!--    添加学员二次确认弹窗-->
    <studyRecordConfirm
      ref="studyRecordConfirm"
      :courseName="courseInfo.courseName"
      :recoverList="recoverList"
      :openType="openType"
      type="addStu"
      @AddStu="confirmAddStu"
    >
    </studyRecordConfirm>
    <!--    导出抽屉-->
    <ExportDrawer ref="exportDrawer"></ExportDrawer>
  </div>
</template>

<script>
import StudyResultByTime from '@/components/studyResultByTime.vue'
import courseTrees from '@/views/tea_course/components/courseTrees'
import courseTeachTree from '@/views/tea_course/components/courseTeachTree.vue'
import {
  finishCourse,
  getOutsideStudentList,
  getStudentSearchList,
  getStudentStudyList,
  putCourseStudentList,
  studentStudyListByGroup
} from '@/api/home'
import onboardingGuide from '@/components/onboardingGuide'
import usuallyDialog from '@/components/usuallyDialog.vue'
import appraiseDialog from '@/components/appraiseDialog.vue'
import { clearUnread, getClassroomMessage } from '@/api/home/message'
import { getCourseIndexTree, getRecoverStudyRecordList } from '@/api/course/course'
import { formatTreeData } from '@/views/tea_course/formatTreeData'
import { listUser } from '@/api/system/user'
import { getCourseSchedulingInfo, setAssistant } from '@/api/teach/teach'
// 任务视图
import teachDrawer from '@/components/teachDrawer/index.vue'
import { getcourseTeachTree, getTeachgroupList, getTeachstudentList } from '@/api/CourseTeach'
import WebSocketService from '@/plugins/websocket'
import { v4 as uuidv4 } from 'uuid'
import { finshExamPaperApi } from '@/api/ExaminationModule/exam'
import studyRecordConfirm from '@/views/teachIndex/compontents/studyRecordConfirm.vue'
import ExportDrawer from '@/views/teachIndex/compontents/exportDrawer.vue'

export default {
  data() {
    return {
      typeText: {
        0: '必修',
        1: '选修',
        2: '考证',
        3: '工学'
      },
      // 学习成果data
      studyResultByTime_open: false,
      studyResultByTime_courseIndexTree: null,
      //openType:  1-->课堂表现    2-->课后作业  3-->课堂表现分
      openType: 3,
      msgList: [],
      colorList: [
        '#4e8dff',
        '#28b28b',
        '#f89a33',
        '#fe5394',
        '#e179ed',
        '#40c2a1',
        '#ff7c32'
      ],
      courseInfo: {},
      groupType: 1,
      // 平时分组件参数
      usuallyDialogOpen: false,
      // 评分组件
      appraiseStudentOpen: false,
      sortList: [
        {
          label: '学号升序',
          value: 2
        },
        {
          label: '学号降序',
          value: 1
        },
        {
          label: '进度升序',
          value: 4
        },
        {
          label: '进度降序',
          value: 3
        }
      ],
      teachSortList: [
        {
          label: '学号升序',
          value: 1
        },
        {
          label: '学号降序',
          value: 2
        },
        {
          label: '完成时间从早到晚',
          value: 3
        },
        {
          label: '完成时间从晚到早',
          value: 4
        },
        {
          label: '考核分数从高到低',
          value: 5
        },
        {
          label: '考核分数从低到高',
          value: 6
        }
      ],
      teachSortList2: [
        {
          label: '学号升序',
          value: 1
        },
        {
          label: '学号降序',
          value: 2
        },
        {
          label: '完成时间从早到晚',
          value: 3
        },
        {
          label: '完成时间从晚到早',
          value: 4
        }
      ],
      groupSortList: [
        // TODO:确认检索修改字段
        {
          label: '编辑小组列表顺序正序',
          value: 1
        },
        {
          label: '编辑小组列表顺序倒序',
          value: 2
        },
        {
          label: '完成时间从早到晚',
          value: 3
        },
        {
          label: '完成时间从晚到早',
          value: 4
        },
        {
          label: '考核平均分从高到低',
          value: 5
        },
        {
          label: '考核平均分从低到高',
          value: 6
        }
      ],
      groupSortList2: [
        // TODO:确认检索修改字段
        {
          label: '编辑小组列表顺序正序',
          value: 1
        },
        {
          label: '编辑小组列表顺序倒序',
          value: 2
        },
        {
          label: '完成时间从早到晚',
          value: 3
        },
        {
          label: '完成时间从晚到早',
          value: 4
        }
      ],
      loading: false,
      msgLoading: false,
      msgExpandAnimate: true,
      studentListSort: 2,
      studentNameSearch: '',
      studentSearchList: [],
      notRead: 0,
      // 工作站
      studentList: [],
      groupStudyList: [],
      // 5.预警 （范用于简单的显示）
      lookDia: false,
      lookTitle: '预警信息',
      lookRuleForm: {
        title: '',
        content: ''
      },
      //助教管理
      assistantDialog: false,
      assistantLoading: false,
      assistantForm: {
        assistantIds: ''
      },
      assistantFormRules: {},
      assistantList: [],
      //添加学员
      addStuDialog: false,
      students: [],
      addStuForm: {
        studentIds: []
      },
      rules: {
        studentIds: [
          { required: true, message: '请选择学员', trigger: 'blur' }
        ]
      },
      classAvgScore: '',
      // includeSelectTask  是否包含选学 0 不包含, 1 包含
      includeSelectTask: 1,
      // 新手指导
      onboardingGuideShow: false,
      onboardingGuideRect: {
        top: 0,
        left: 0
      },
      /***任务视图***/
      courseTeachTree: [],
      // 任务视图：0,学生情况：1
      switchValue: 1,
      teachGroupType: 1,
      teachDrawerShow: false,
      teachDrawerType: 0,
      GroupListSort: void 0,
      teachStudentSort: void 0,
      isClose: false,
      activeNode: {},
      activeNodeIndex: void 0,
      stepStudentList: [],
      stepGroupList: [],
      teachStudentLoading: false,
      teachGroupLoading: false,
      studentRankImg: {
        1: require('@/assets/images/topOne.png'),
        2: require('@/assets/images/topTwo.png'),
        3: require('@/assets/images/topThree.png'),
        4: require('@/assets/images/topFour.png'),
        5: require('@/assets/images/topFive.png')
      },
      groupRankImg: {
        1: require('@/assets/images/groupTopone.png'),
        2: require('@/assets/images/groupToptwo.png'),
        3: require('@/assets/images/groupTopthree.png')
      },
      recoverList: []
    }
  },
  components: {
    studyRecordConfirm,
    onboardingGuide,
    appraiseDialog,
    usuallyDialog,
    StudyResultByTime,
    courseTrees,
    teachDrawer,
    courseTeachTree,
    ExportDrawer
  },
  watch: {
    studentNameSearch: {
      handler(val) {
        let id = `stu_${val}`
        this.scrollToAnchor(id)
      }
    },
    studentListSort: {
      handler(val) {
        //存储当前的排序规则
        this.$store.dispatch('SetStudentCardSort', val)
      }
    },
    groupType: {
      handler(val) {
        //存储当前的布局模式
        this.$store.dispatch('SetGroupType', val)
        let courseInfo = localStorage.getItem('COURSE_INFO')
        if (courseInfo) {
          if (val == 1) {
            this.getStudentCard()
          } else {
            this.getStudentCardByGroup()
          }
        }
      }
    },
    GroupListSort: {
      handler(val) {
        //存储当前的分组模式排序规则
        this.$store.dispatch('SetGroupListSort', val)
      }
    },
    teachStudentSort: {
      handler(val) {
        //存储当前学生模式的排序规则
        this.$store.dispatch('SetTeachStudentSort', val)
      }
    },
    teachGroupType: {
      handler(val) {
        //存储当前的布局模式
        this.$store.dispatch('SetTeachGroupType', val)
        let courseInfo = localStorage.getItem('COURSE_INFO')
        WebSocketService.disconnect()
        this.initWebSocket()
        if (courseInfo) {
          this.getTree()
          if (val == 1 && this.activeNodeIndex) {
            this.getStepStudentList()
          } else if (val == 2 && this.activeNodeIndex) {
            this.getStepGroupList()
          }
        }
      }
    },
    switchValue: {
      handler(val) {
        //存储当前的展示内容
        this.$store.dispatch('SetSwitchValue', val)
        this.getMessageList()
        this.getStudentSearch()
        if (val == 0) {
          this.getTree()
          this.initWebSocket()
          this.$nextTick(() => {
            this.dragControllerDiv()
          })
        } else {
          this.getStudentCard()
        }
      }
    }
  },
  mounted() {
    //是否开启新手指导
    console.log(this.$store.getters.curRole)

    if (
      (this.$store.getters.guide == 0 || this.$store.getters.guide == 2) &&
      this.$store.getters.curRole == 'teacher'
    ) {
      this.onboardingGuideShow = true
      this.$nextTick(() => {
        // 确保 myElement 存在
        if (this.$refs.studentScore) {
          const rect = this.$refs.studentScore.getBoundingClientRect()

          this.onboardingGuideRect = {
            top: rect.top,
            left: rect.left
          }
          console.log('距离屏幕顶部:', this.onboardingGuideRect)
        } else {
          console.log('元素未找到')
        }
      })
    } else {
      this.onboardingGuideShow = false
    }

    //获取当前的布局模式
    this.groupType = this.$store.getters.groupType
    // 获取当前页面的展示内容
    this.switchValue = this.$store.getters.SwitchValue
    // 获取当前课程教学的布局模式
    this.teachGroupType = this.$store.getters.teachGroupType
    //获取学生列表
    this.studentListSort = this.$store.getters.studentCardSort
    // 获取教学学生排序
    this.teachStudentSort = this.$store.getters.teachStudentSort
    // 获取教学分组排序
    this.GroupListSort = this.$store.getters.GroupListSort
    // 获取树状展开状态
    this.isClose = this.$store.getters.isClose
    // 获取选中树状节点
    this.activeNode = this.$store.getters.activeNode
    this.activeNodeIndex = this.activeNode.id
    if (this.switchValue == 0) {
      this.$nextTick(() => {
        this.dragControllerDiv()
      })
    }
    this.$EventBus.$on('refresh', (data) => {
      if (data) {
        this.$nextTick(() => {
          this.getMessageList()
        })
      }
    })
  },
  beforeDestroy() {
    this.$EventBus.$off('refresh')
    WebSocketService.disconnect()
  },
  created() {
    let courseInfo = localStorage.getItem('COURSE_INFO')
    if (!courseInfo) {
      this.$router.replace({ path: '/teachIndex' })
    } else {
      this.courseInfo = JSON.parse(courseInfo)
      this.getMessageList()
      this.getStudentSearch()
      //获取学生列表
      this.studentListSort = this.$store.getters.studentCardSort
      if (this.switchValue == 1) {
        //获取学生列表
        this.getStudentCard()
      } else {
        this.getTree()
        this.initWebSocket()
      }
    }
  },
  methods: {
    handleViewStudentScore() {
      this.$router.push({
        path: '/studentGrade'
      })
    },
    addAssistant() {
      this.$refs['assistantFormRef'].validate(async(valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: `正在处理...`,
            spinner: 'el-icon-loading',
            background: 'rgba(255, 255, 255, 0.3)'
          })
          try {
            let params = {
              assistantIds: this.assistantForm.assistantIds.join(','),
              id: this.courseInfo.courseSchedulingId
            }
            let res = await setAssistant(params)
            const { code } = res
            if (code === 200) {
              this.$modal.msgSuccess('添加成功')
              this.cancelAssistant()
              this.getStudentCard()
            }
          } catch (e) {
            console.error(e)
          } finally {
            loading.close()
          }
        } else {
          return false
        }
      })
    },
    //获取助教列表
    async getListUser() {
      this.assistantLoading = true
      try {
        let params = {
          status: 0,
          pageNum: 1,
          pageSize: 999999,
          schoolId: this.$store.getters.schoolId
        }
        let res = await listUser(params)
        let teaRes = await getCourseSchedulingInfo(
          JSON.parse(localStorage.getItem('COURSE_INFO')).courseSchedulingId
        )
        const { code, rows } = res
        if (code === 200) {
          rows.forEach((item) => {
            item.labelName = `${item.nickName}(${item.userName.slice(2)})`
            item.disabled = false
            console.log('userIds', teaRes.data.userIds)
            teaRes.data.userIds.map((teaItem) => {
              console.log(item.userId, teaItem)
              if (item.userId + '' == teaItem + '') {
                item.disabled = true
              }
            })
          })
          this.assistantList = rows
        }
      } catch (e) {
        console.error(e)
      } finally {
        this.assistantLoading = false
      }
    },
    // 查看学生学习成功
    async viewStudyResult() {
      await this.getCourseIndexTree()
      this.studyResultByTime_open = true
      this.$nextTick(() => {
        this.$refs.resultTree.hightFirst()
      })
    },
    // 获取课程nodes
    async getCourseIndexTree() {
      let res = await getCourseIndexTree(this.courseInfo.courseId)
      const { code, data } = res
      if (code == 200) {
        let formattedTreeData = formatTreeData(data.children)
        console.log(formattedTreeData, 'formatTreeData')
        this.studyResultByTime_courseIndexTree = formattedTreeData
      }
    },
    // 用于生成xx/xxx/xxxx
    async getPathToNode(nodes, targetId, pathAccumulator = []) {
      for (const node of nodes) {
        // 如果当前节点匹配目标ID，说明路径构建完成，返回累积的路径
        if (node.id === targetId) {
          return [...pathAccumulator, node.name] // 包含当前节点名称
        }
        // 递归查找子节点中的路径
        if (node.children && node.children.length > 0) {
          // 将当前节点的名称添加到路径中，然后递归查找
          const result = await this.getPathToNode(node.children, targetId, [
            ...pathAccumulator,
            node.name
          ])
          if (result) {
            return result // 找到路径，返回
          }
        }
      }

      return null // 未找到目标节点，返回null
    },
    // 点击节点
    handleClick(e) {
      console.log('index点击节点', e)
      this.getPathToNode(this.studyResultByTime_courseIndexTree, e.id).then(
        async(path) => {
          this.preview = {
            coursePath: path ? path.join('/') : '',
            courseName: this.courseInfo.courseName,
            studentId: '',
            studentName: ''
          }
          this.$refs.studyResultByTimeDia.getALLresult(
            { type: 'teacherIndex', item: e },
            {
              courseId: this.courseInfo.courseId,
              classId: this.courseInfo.classId,
              courseSchedulingId: this.courseInfo.courseSchedulingId
            }
          )
        }
      )
    },
    // 获取学生列表
    async getStudentSearch() {
      try {
        let res = await getStudentSearchList(
          this.courseInfo.courseSchedulingId
        )
        const { code, data } = res
        if (code == 200) {
          this.studentSearchList = data
        }
      } catch (e) {
        console.error(e)
      }
    },
    scrollToAnchor(id) {
      const anchor = document.getElementById(id)
      if (anchor) {
        anchor.scrollIntoView({ behavior: 'smooth', block: 'center' })
      }
    },
    async clearUnread() {
      this.$confirm(
        `清除后，所有待办消息将变为已读状态，请谨慎处理！`,
        '清除确认',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(async() => {
          if (this.notRead <= 0) {
            return
          }
          this.msgLoading = true
          let res = await clearUnread(this.courseInfo.courseSchedulingId)
          if (res.code == 200) {
            this.msgLoading = false
            this.getMessageList()
          }
        })
        .catch(() => {
        })
    },
    searchStudent() {
      if (this.groupType == 1) {
        this.getStudentCard()
      } else {
        this.getStudentCardByGroup()
      }
    },
    appraiseStudent() {
      this.appraiseStudentOpen = true
    },
    msgRouteTo(item) {
      if (item.msgType == 0) {
        this.$router.push({
          path: '/approvalAnswer',
          query: {
            keyId: item.keyId,
            userId: item.senderId,
            approvalType: 1
          }
        })
      }
    },
    async getMessageList() {
      let COURSE_INFO = localStorage.getItem('COURSE_INFO')
      let courseInfo = JSON.parse(COURSE_INFO)
      let params = {
        sortType: 0,
        readStatus: 0,
        courseSchedulingId: courseInfo.courseSchedulingId
      }
      this.msgLoading = true
      let res = await getClassroomMessage(params)
      const { code, data } = res
      if (code == 200) {
        let arr = []
        if (data.length > 0) {
          for (const row of data) {
            if (row.msgType == 0 || row.msgType == 4) {
              arr.push(row)
            }
          }
        }
        this.notRead = arr.length
        this.msgList = arr
        this.msgLoading = false
      }
    },
    async getOutsideStudentList() {
      let res = await getOutsideStudentList(this.courseInfo.courseSchedulingId)
      const { code, data } = res
      if (code == 200) {
        if (data.length > 0) {
          data.forEach((item) => {
            item.allName = `${item.studentName}—${item.studentNum}`
          })
        }
        let obj = {
          studentNum: '全选',
          allName: '全选',
          studentId: 0,
          children: data
        }
        if (data.length > 0) {
          this.students = [obj]
        } else {
          this.students = []
        }
      }
    },
    async finishCourse() {
      for (const item of this.studentList) {
        if (item.progressRate != 100) {
          this.$alert(
            '班级内有学生学习进度未完成，请逐个处理后再进行结束。',
            '提示',
            {
              type: 'warning'
            }
          )
          return
        }
      }
      let text
      // includeSelectTask  是否包含选学 0 不包含, 1 包含
      if (this.includeSelectTask == 0) {
        text = '结束后不可撤销，请谨慎处理！'
      } else {
        text = '本课程有选学内容，如果已确认学生选学完成或不学点击确认结束！'
      }
      this.$confirm(text, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          let res = await finishCourse(this.courseInfo.courseSchedulingId)
          const { code } = res
          if (code == 200) {
            if (res.msg.indexOf('成功') > -1) {
              this.$modal.msgSuccess('结束成功')
              this.courseInfo.finishStatus = 1
              let obj = {
                ...this.courseInfo
              }
              localStorage.setItem('COURSE_INFO', JSON.stringify(obj))
            } else {
              this.$modal.msgError(res.msg)
            }
          }
        })
        .catch(() => {
          this.$modal.msgInfo('已取消')
        })
    },
    randomColor() {
      const randomIndex = Math.floor(Math.random() * this.colorList.length)
      return this.colorList[randomIndex]
    },
    routeTo(path, type) {
      if (type == 1) {
        //存储当前的布局模式
        this.$store.dispatch('SetGroupType', 1)
        // 去选课页面清楚本地缓存
        localStorage.removeItem('COURSE_INFO')
        // 恢复记住的课程教学数据
        this.$store.dispatch('SetActiveNode', {})
        this.$store.dispatch('SetClose', false)
        this.$store.dispatch('SetSwitchValue', 1)
        this.$store.dispatch('SetTeachGroupType', 1)
        this.$store.dispatch('SetTeachStudentSort', 1)
        this.$store.dispatch('SetGroupListSort', 1)
      }
      this.$router.push({
        path,
        query: {
          classId: this.courseInfo.classId,
          courseSchedulingId: this.courseInfo.courseSchedulingId
        }
      })
    },
    /* 展示消息列表 */
    handleExpandMsg(e) {
      this.msgExpandAnimate = e
    },
    showAddStu() {

      this.getOutsideStudentList()
      // }
      this.addStuDialog = true
    },
    showAssistant() {
      this.assistantDialog = true
      this.getListUser()
    },
    addStudentList() {
      this.$refs['addStuForm'].validate(async(valid) => {
        if (valid) {
          try {
            let studentIds = this.addStuForm.studentIds.join(',')
            let obj = {
              courseId: this.courseInfo.courseId,
              studentIds
            }
            let res = await getRecoverStudyRecordList(obj)
            if (res.code == 200) {
              this.recoverList = res.data
              // 有可恢复学生记录
              if (this.recoverList && this.recoverList.length > 0) {
                let params = {
                  courseSchedulingId: this.courseInfo.courseSchedulingId,
                  studentIds
                }
                this.$refs.studyRecordConfirm.show(params)
              } else {
                this.confirmAddStu(studentIds, 0)
              }
            }
          } catch (err) {
            console.log(err)
          }
        } else {
          return false
        }
      })
    },
    async confirmAddStu(studentIds, recoverStudyRecord) {
      const loading = this.$loading({
        lock: true,
        text: `正在添加...`,
        spinner: 'el-icon-loading',
        background: 'rgba(255, 255, 255, 0.3)'
      })
      let res
      try {
        res = await putCourseStudentList(
          this.courseInfo.courseSchedulingId,
          studentIds,
          recoverStudyRecord
        )
        if (res.code == 200) {
          loading.close()
          this.$modal.msgSuccess('添加成功')
          this.addStuDialog = false
          if (this.groupType == 1) {
            this.getStudentCard()
          } else {
            this.getStudentCardByGroup()
          }
        } else {
          loading.close()
        }
      } catch (e) {
        loading.close()
      }
    },
    cancelAssistant() {
      this.assistantDialog = false
      this.$refs['assistantFormRef'].resetFields()
    },
    cancel() {
      this.addStuDialog = false
      this.$refs['addStuForm'].resetFields()
    },
    // 获取学生列表---正常模式
    async getStudentCard() {
      this.loading = true
      let res = await getStudentStudyList(
        this.courseInfo.courseSchedulingId,
        this.studentListSort
      )
      const { code, data } = res

      if (code === 200) {
        console.log(data)
        let arr = []
        for (const datum of data.studentList) {
          let obj = {
            ...datum,
            bgColor: this.randomColor(),
            ancestorsName: datum.ancestorsName
              ? datum.ancestorsName.split('/')
              : ['暂无', '暂无', '暂无']
          }
          if (datum.progressRate != 100 && !datum.ancestorsName) {
            obj.ancestorsName = ['', '', '暂无学习中记录']
          }
          if (datum.progressRate == 100 && !datum.ancestorsName) {
            obj.ancestorsName = ['', '', '学习已完成']
          }
          arr.push(obj)
        }
        this.classAvgScore = arr.length > 0 ? arr[0].avgScore : 0
        this.studentList = arr
        this.courseInfo = data.courseInfo
        if (data.courseInfo.assistantIds) {
          let assistantIds = []
          data.courseInfo.assistantIds.split(',').forEach((item) => {
            assistantIds.push(item - 0)
          })
          this.assistantForm.assistantIds = assistantIds
        }
        localStorage.setItem('COURSE_INFO', JSON.stringify(this.courseInfo))
        this.loading = false
      }
    },
    // 获取学生列表---小组模式
    async getStudentCardByGroup() {
      this.loading = true
      let res = await studentStudyListByGroup(
        this.courseInfo.courseSchedulingId,
        this.studentListSort
      )
      const { code, data } = res
      if (code === 200) {
        for (const datum of data) {
          for (const item of datum.ccCourseGroupMemberList) {
            item.bgColor = this.randomColor()

            if (item.ancestorsName) {
              item.ancestorsName = item.ancestorsName.split('/')
            }
            if (item.progressRate != 100 && !item.ancestorsName) {
              item.ancestorsName = ['', '', '暂无学习中记录']
            }
            if (item.progressRate == 100 && !item.ancestorsName) {
              item.ancestorsName = ['', '', '学习已完成']
            }
          }
        }
        this.groupStudyList = data
        this.loading = false
      }
    },
    // 跳转学习进度详情
    toModule(item) {
      console.log('跳转学习进度详情', item, this.switchValue)
      if (!item.id && this.switchValue == 0) {
        return false
      }
      this.$router.push({
        path: '/learningProgress',
        query: {
          courseStuId: item.courseStuId,
          courseSchedulingId: item.courseSchedulingId,
          studentId: item.studentId,
          color: item.bgColor
        }
      })
    },
    // 跳转查看全部事项
    toAllBacklog() {
      let object = {
        courseId: this.courseInfo.courseId,
        classId: this.courseInfo.classId,
        type: 'course'
      }
      this.$router.push({
        path: '/message',
        query: object
      })
    },
    /************ 任务视图 ************/
    //start消息websocket>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
    initWebSocket() {
      let uuid = uuidv4();
      let hostname = window.location.hostname
      const local = hostname === 'localhost' || /^(\d{1,3}\.){3}\d{1,3}$/.test(hostname) ? 'ws://' + hostname + ':9208' : 'wss://' + hostname+ '/cloud'
      let url = local + `/ws/CourseTeachingWS?user=teacher-${this.$store.getters.userId}-${this.teachGroupType}-${uuid.replace(/-/g, "")}`;
      WebSocketService.connect(url, this.handleMessage);
    },
    handleMessage(data) {
      //接收服务器推送的信息
      //打印收到服务器的内容
      let msgData = JSON.parse(data)
      console.log(msgData, '教学教学')
      this.refreshList(msgData)
      // this.getList();
    },
    //end消息websocket>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
    // 左右拖动
    dragControllerDiv() {
      let resize = document.getElementById('resize')
      let left = document.getElementById('left')
      let right = document.getElementById('right')
      // if (!resize && !left && !right && !box) {
      //   return
      // }
      // 鼠标按下事件
      resize.onmousedown = function(e) {
        // 记录坐标起始位置
        let startX = e.clientX

        // 左边元素起始宽度
        let startLeftWidth = left.offsetWidth
        // 右边元素起始宽度
        let startRightWidth = right.offsetWidth

        // 鼠标拖动事件
        document.onmousemove = function(e) {
          // 计算鼠标拖动的距离
          let moveX = e.clientX - startX
          // 更新左边元素宽度
          left.style.width = startLeftWidth + moveX + 'px'
          // 更新右边元素宽度
          right.style.width = startRightWidth - moveX + 'px'
        }
        // 鼠标松开事件
        document.onmouseup = function() {
          document.onmousemove = null
          document.onmouseup = null
        }
        return false
      }
    },
    // 获取目录
    async getTree() {
      let res = await getcourseTeachTree(this.courseInfo.courseSchedulingId)
      const { code, data } = res
      if (code == 200) {
        this.courseTeachTree = formatTreeData(data.children)
      }
    },
    // 获取环节学生列表
    async getStepStudentList() {
      this.teachStudentLoading = true
      let res = await getTeachstudentList(
        this.courseInfo.courseSchedulingId,
        this.activeNodeIndex
      )
      let { code, data } = res
      if (code === 200) {
        let arr = []
        for (const datum of data) {
          let obj = {
            ...datum,
            bgColor: this.randomColor(),
            remainingTime: void 0,
            timer: void 0
          }
          if (obj.examStatus == 2) {
            let minutesDifference = this.getTimeDifference(obj.examStartTime)
            if (minutesDifference >= obj.duration && obj.duration > 0) {
              obj.examFlag = 3
            } else {
              this.startCountdown(obj)
            }
          }
          arr.push(obj)
        }
        this.stepStudentList = arr
        console.log('环节学生列表', arr)
        this.sortTeachStudent()
        this.teachStudentLoading = false
      }
    },
    // 获取环节小组列表
    async getStepGroupList() {
      console.log('获取环节小组列表')
      this.teachGroupLoading = true
      let res = await getTeachgroupList(
        this.courseInfo.courseSchedulingId,
        this.activeNodeIndex
      )
      let { code, data } = res
      if (code === 200) {
        for (const datum of data) {
          datum.remainingTime = void 0
          datum.timer = void 0
          if (datum.examStatus == 2) {
            let minutesDifference = this.getTimeDifference(datum.examStartTime)
            if (minutesDifference >= datum.duration && datum.duration > 0) {
              datum.examFlag = 3
            } else {
              this.startCountdown(datum)
            }
          }
          for (const item of datum.courseTeachingStudentStudyList) {
            item.bgColor = this.randomColor()
            item.remainingTime = void 0
            item.timer = void 0
            if (item.examStatus == 2) {
              let minutesDifference = this.getTimeDifference(
                item.examStartTime
              )
              if (minutesDifference >= item.duration && item.duration > 0) {
                item.examFlag = 3
              } else {
                this.startCountdown(item)
              }
            }
          }
        }
        this.stepGroupList = data
        console.log('this.stepGroupList', this.stepGroupList)
        this.sortGroup()
        this.teachGroupLoading = false
      }
    },
    // 添加计时器
    startCountdown(student) {
      let cutdownTime = 0
      if (!student.examStartTime) {
        cutdownTime = 0
      } else {
        const now = new Date()
        const startTime = new Date(student.examStartTime)
        // const endTime = new Date(startTime.getTime() + duration);
        cutdownTime = Math.max(
          0,
          Math.floor((now - startTime.getTime()) / 1000)
        ) // 以秒为单位
        student.timer = setInterval(() => {
          cutdownTime += 1
          // 更新显示时间
          student.remainingTime = this.formatTime(cutdownTime)
          if (cutdownTime >= student.duration * 60 && student.duration > 0) {
            clearInterval(student.timer)
            student.examFlag = 3
          }
          this.$forceUpdate() // 强制Vue更新视图
        }, 1000)
      }
    },
    formatTime(seconds) {
      const minutes = Math.floor(seconds / 60)
      const secs = seconds % 60
      return `${minutes}:${secs < 10 ? '0' : ''}${secs}`
    },
    getTimeDifference(examStartTime) {
      // 获取当前时间
      const now = new Date()
      // 将 examStartTime 转换为 Date 对象
      const startTime = new Date(examStartTime)
      // 计算时间差（毫秒）
      const timeDifference = now - startTime
      // 转换为分钟
      return timeDifference / (1000 * 60)
    },
    // 展开关闭操作
    handlechange() {
      this.isClose = !this.isClose
      this.$store.dispatch('SetClose', this.isClose)
    },
    ClickTeachNode(e) {
      console.log('index点击节点', e)
      if (e.type != 3 && e.type != 4) {
        return
      }
      this.activeNode = e
      this.$store.dispatch('SetActiveNode', this.activeNode)
      this.activeNodeIndex = JSON.parse(JSON.stringify(this.activeNode.id))
      if (this.teachGroupType == 1) {
        this.getStepStudentList()
      } else {
        this.getStepGroupList()
      }
    },
    // 学生排序
    sortTeachStudent() {
      switch (this.teachStudentSort) {
        case 1:
          this.stepStudentList.sort((a, b) => {
            return a.studentNum.localeCompare(b.studentNum) // 升序排列
          })
          break
        case 2:
          this.stepStudentList.sort((a, b) => {
            return b.studentNum.localeCompare(a.studentNum) // 降序排列
          })
          break
        case 3:
          this.stepStudentList.sort((a, b) => {
            // 设置考核状态的优先级顺序
            const statusPriority = { 1: 1, 2: 3, 0: 4, '-1': 0, 3: 2 }
            // 先依据考核状态排序
            if (statusPriority[a.examStatus] !== statusPriority[b.examStatus]) {
              return (
                statusPriority[a.examStatus] - statusPriority[b.examStatus]
              )
            }
            // 如果 examStatus 相同，按 finishTime 排序
            if (a.finishTime === null) return 1 // a 为 null，则 b 更靠前
            if (b.finishTime === null) return -1 // b 为 null，则 a 更靠前
            return new Date(a.finishTime) - new Date(b.finishTime) // 升序排列
          })
          break
        case 4:
          this.stepStudentList.sort((a, b) => {
            // 设置考核状态的优先级顺序
            const statusPriority = { 1: 1, 2: 3, 0: 4, '-1': 0, 3: 2 }

            // 先依据考核状态排序
            if (statusPriority[a.examStatus] !== statusPriority[b.examStatus]) {
              return (
                statusPriority[a.examStatus] - statusPriority[b.examStatus]
              )
            }
            // 如果 examStatus 相同，按 finishTime 排序
            if (a.finishTime === null) return 1 // a 为 null，则 b 更靠前
            if (b.finishTime === null) return -1 // b 为 null，则 a 更靠前
            return new Date(b.finishTime) - new Date(a.finishTime) // 升序排列
          })
          break
        case 5:
          this.stepStudentList.sort((a, b) => {
            if (a.examStatus === 0) return 1 // a 为 未开始，则 b 更靠前
            if (b.examStatus === 0) return -1 // b 为 未开始，则 a 更靠前
            return b.score - a.score // 升序排列
          })
          break
        case 6:
          this.stepStudentList.sort((a, b) => {
            if (a.examStatus === 0) return 1 // a 为 未开始，则 b 更靠前
            if (b.examStatus === 0) return -1 // b 为 未开始，则 a 更靠前
            return a.score - b.score // 升序排列
          })
          break
      }
    },
    // 小组排序
    sortGroup() {
      switch (this.GroupListSort) {
        case 1:
          this.stepGroupList.sort((a, b) => {
            if (a.groupName === '未分组') return 1 // a 为 未分组，则 b 更靠前
            if (b.groupName === '未分组') return -1 // b 为 未分组，则 a 更靠前
            return a.sort - b.sort // 升序排列
          })
          break
        case 2:
          this.stepGroupList.sort((a, b) => {
            if (a.groupName === '未分组') return 1 // a 为 未分组，则 b 更靠前
            if (b.groupName === '未分组') return -1 // b 为 未分组，则 a 更靠前
            return b.sort - a.sort // 降序排列
          })
          break
        case 3:
          this.stepGroupList.sort((a, b) => {
            // 设置考核状态的优先级顺序
            const statusPriority = { 3: 1, 0: 3, 2: 0, 1: 2 }
            // 先依据考核状态排序
            if (statusPriority[a.examStatus] !== statusPriority[b.examStatus]) {
              return (
                statusPriority[a.examStatus] - statusPriority[b.examStatus]
              )
            }
            if (a.groupName === '未分组') return 1 // a 为 null，则 b 更靠前
            if (b.groupName === '未分组') return -1 // b 为 null，则 a 更靠前
            return new Date(a.finishTime) - new Date(b.finishTime) // 升序排列
          })
          break
        case 4:
          this.stepGroupList.sort((a, b) => {
            // 设置考核状态的优先级顺序
            const statusPriority = { 3: 1, 0: 3, 2: 0, 1: 2 }
            // 先依据考核状态排序
            if (statusPriority[a.examStatus] !== statusPriority[b.examStatus]) {
              return (
                statusPriority[a.examStatus] - statusPriority[b.examStatus]
              )
            }
            if (a.groupName === '未分组') return 1 // a 为 null，则 b 更靠前
            if (b.groupName === '未分组') return -1 // b 为 null，则 a 更靠前
            return new Date(b.finishTime) - new Date(a.finishTime) // 升序排列
          })
          break
        case 5:
          this.stepGroupList.sort((a, b) => {
            if (a.groupName === '未分组') return 1 // a 为 未分组，则 b 更靠前
            if (b.groupName === '未分组') return -1 // b 为 未分组，则 a 更靠前
            return b.avgScore - a.avgScore // 升序排列
          })
          break
        case 6:
          this.stepGroupList.sort((a, b) => {
            if (a.groupName === '未分组') return 1 // a 为 未分组，则 b 更靠前
            if (b.groupName === '未分组') return -1 // b 为 未分组，则 a 更靠前
            return a.avgScore - b.avgScore // 升序排列
          })
          break
      }
    },
    CourseDetail() {
      this.teachDrawerShow = true
      this.teachDrawerType = 0
    },
    DataAnalysis() {
      this.teachDrawerShow = true
      this.teachDrawerType = 1
    },
    // 打开全局倒计时组件
    Countdown() {
      this.$store.dispatch('changeCustomModalVisible', true)
    },
    async toExamPaper(data, type) {
      if (!data.examPaperId && data.examStatus != 2) {
        this.$modal.msgWarning('该考核无试卷，分数为教师手动赋分')
        return
      }
      // 1:个人模式模式批改 2:个人模式详情 3:小组外批改 4:小组外详情
      if (type == 1) {
        if (data.examStatus == 2 && !data.score && data.score != 0) {
          await finshExamPaperApi(data.examPaperId)
        }
        this.$router.push({
          path: '/approvalAnswer',
          query: {
            keyId: data.examPaperId,
            studentId: data.studentId,
            approvalType: 1
          }
        })
      } else if (type == 2) {
        this.$router.push({
          path: '/examDetail',
          query: {
            id: data.examPaperId,
            studentId: data.studentId,
            sign: 'tea'
          }
        })
      } else if (type == 3 || type == 4) {
        if (data.examStatus == 2 && !data.avgScore && data.avgScore != 0) {
          await finshExamPaperApi(data.examPaperId)
        }
        if (type == 3) {
          this.$router.push({
            path: '/approvalAnswer',
            query: {
              keyId: data.examPaperId,
              userId: this.$store.getters.userId,
              approvalType: 1
            }
          })
        } else {
          console.log(data)
          this.$router.push({
            path: '/examDetail',
            query: {
              id: data.examPaperId,
              studentId: data.studentIds.split(',')[0],
              sign: 'tea'
            }
          })
        }
      }
    },
    // 更新数据
    refreshList(msgData) {
      // 个人模式
      if (this.teachGroupType == 1) {
        let studyStatusList = msgData.studyStatusList
        let topFive = msgData.topFive
        this.mergeStudentLists(studyStatusList, this.stepStudentList)
        this.mergeStudentRank(topFive, this.stepStudentList)
        this.sortTeachStudent()
        this.$forceUpdate()
      }
      // 小组模式组内改变
      if (this.teachGroupType == 2) {
        let groupInfo = msgData.groupInfo
        let groupRank = msgData.groupRank
        this.mergeGroupLists(groupInfo, this.stepGroupList)
        this.mergeGroupRank(groupRank, this.stepGroupList)
        this.sortGroup()
        this.$forceUpdate()
      }
      this.getTree()
    },
    mergeStudentLists(a, b) {
      if (a && a.length > 0) {
        a.forEach((itemA) => {
          const index = b.findIndex(
            (itemB) => itemB.studentId === itemA.studentId
          )
          if (index !== -1) {
            // 替换b中的元素
            b[index] = { ...itemA }
            b[index].bgColor = this.randomColor()
            b[index].remainingTime = void 0
            b[index].timer = void 0
            if (b[index].examStatus == 2) {
              this.startCountdown(b[index])
            }
          }
        })
      }
    },
    mergeStudentRank(a, b) {
      if (a && a.length > 0) {
        a.forEach((itemA) => {
          const index = b.findIndex((itemB) => itemB.id === itemA.id)
          if (index !== -1) {
            // 替换b中的元素
            b[index].scoreRank = itemA.scoreRank
          }
        })
      }
    },
    mergeGroupLists(a, b) {
      if (b && b.length > 0) {
        b.forEach((itemA, index) => {
          if (
            itemA &&
            itemA.groupId !== undefined &&
            a?.groupId !== undefined
          ) {
            const flag = itemA.groupId === a.groupId
            if (flag) {
              // 替换b中的元素
              b[index] = a
              b[index].bgColor = this.randomColor()
              b[index].remainingTime = void 0
              b[index].timer = void 0
              if (b[index].examStatus == 2) {
                this.startCountdown(b[index])
              }
              for (const item of b[index].courseTeachingStudentStudyList) {
                item.bgColor = this.randomColor()
                item.remainingTime = void 0
                item.timer = void 0
                if (item.examStatus == 2) {
                  let minutesDifference = this.getTimeDifference(
                    item.examStartTime
                  )
                  if (minutesDifference >= item.duration && item.duration > 0) {
                    item.examFlag = 3
                  } else {
                    this.startCountdown(item)
                  }
                }
              }
            }
          }
        })
      }
    },
    mergeGroupRank(a, b) {
      if (a && a.length > 0) {
        a.forEach((itemA) => {
          const index = b.findIndex(
            (itemB) => itemB && itemA && itemB.groupId === itemA.groupId
          )
          if (index !== -1) {
            // 替换b中的元素
            b[index].scoreRank = itemA.scoreRank
          }
        })
      }
    },
    // 打开导出抽屉
    handleOpenExport(type) {
      this.$refs.exportDrawer.handleOpen(type,this.courseInfo)
    }
  }
}
</script>

<style scoped lang="scss">
/* 调整Switch的宽度和高度 */
::v-deep .el-switch__core {
  width: 36px !important; /* 设置你想要的宽度 */
  height: 18px !important; /* 设置你想要的高度 */
}

/* 调整Switch中滑块的大小 */
::v-deep .el-switch__core::after {
  width: 15px !important; /* 设置滑块的宽度 */
  height: 14px !important; /* 设置滑块的高度 */
}

.studyResult {
  // ::v-deep {
  //   .el-dialog__header {
  //     display: none;
  //   }
  ::v-deep .el-dialog__body {
    padding: 20px 26px !important;
  }
}

.transitionAnimations {
  transition: all 0.3s;
}

@mixin btn_plain($bg_color, $color) {
  background: $bg_color;
  color: $color;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  user-select: none;

  &:active {
    background: darken($bg_color, 5%);
    color: darken($color, 18%);
  }

  &:disabled {
    background: lighten($bg_color, 5%);
    color: lighten($color, 40%);
  }

  @content;
}

.expandIcon {
  width: 32px;
  height: 32px;

  .icon {
    width: 32px;
    height: 32px;
  }

  .expandIcon_num {
    top: -5px;
    right: -2px;
    z-index: 6;
    text-align: center;
    font-size: 10px;
    font-family: PingFangSC-Medium, PingFang SC, sans-serif;
    font-weight: 500;
    color: #ffffff;
    line-height: 14px;
    border-radius: 7px;
    width: 14px;
    height: 14px;
    background: #ff3b30;
  }
}

.toDo {
  width: 350px;
  height: calc(100vh - 68px - 18px - 30px);

  border-left: 1px solid #ebebeb;

  .toDo_titleRow {
    height: 71px;
    box-sizing: border-box;
    padding: 24px 18px 0 24px;

    .toDo_title {
      font-size: 18px;
      font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
      font-weight: 600;
      color: #333333;
      line-height: 25px;

      .toDoNum {
        top: 0;
        right: -14px;
        z-index: 6;
        text-align: center;
        font-size: 10px;
        font-family: PingFangSC-Medium, PingFang SC, sans-serif;
        font-weight: 500;
        color: #ffffff;
        line-height: 14px;
        border-radius: 7px;
        width: 14px;
        height: 14px;
        background: #ff3b30;
      }

      .clear_all_icon {
        width: 16px;
        height: 16px;
        cursor: pointer;
        user-select: none;
      }
    }

    .toDo_more {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #999999;
      line-height: 25px;
    }

    .toDo_more::after {
      content: "";
      margin: 12px 0 0 5px;
      display: inline-block;
      width: 8px;
      height: 8px;
      border-width: 1px 0 0 1px;
      transform: translate(-50%, -50%) rotate(135deg);
    }
  }
}

// .addStudent1:last-of-type {
//   margin: 0 8px 0 8px;
// }
.addStudent1 {
  @include btn_plain(#ffffff, #999999) {
    margin: 0 6px 8px 6px;
    padding: 10px;
    height: 42px;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid #edeff0;

    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
  }

  img {
    width: 16px;
    height: 16px;
  }

  .text {
    transition: all 2s ease;
    overflow: hidden;
  }
}

.addStudent {
  @include btn_plain(#ffffff, #999999) {
    padding: 10px 7px;
    height: 32px;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid #edeff0;

    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
  }

  img {
    width: 16px;
    height: 16px;
  }

  .text {
    transition: all 2s ease;
    overflow: hidden;
  }
}

.teaching {
  height: 100%;

  .top_Title {
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .course_name {
      min-width: 120px;
      font-size: 18px;
      font-family: PingFangSC, PingFang SC, sans-serif;
      font-weight: 400;
      color: #333333;
      line-height: 25px;
      display: flex;
      align-items: center;

      .course_icon {
        user-select: none;
        width: 24px;
        height: 24px;
        margin-right: 10px;
      }

      .text {
        max-width: 200px;
      }
    }

    .class_name {
      @include btn_plain(#ffffff, #333333) {
        height: 32px;
        padding: 0 10px;
        background: #ffffff;
        border-radius: 8px;
        font-size: 14px;
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 400;
        color: #333333;
      }

      .text {
        max-width: 230px;
        color: #3683fa;
      }

      img {
        width: 16px;
        height: 16px;
        margin-right: 8px;
      }
    }

    .btns {
      display: flex;
      align-items: center;

      .toggleBtn {
        display: flex;
        align-items: center;
        margin-right: 8px;
        border-radius: 8px;
        border: 1px solid #edeff0;
        height: 32px;
        padding: 0 10px;
        box-sizing: border-box;

        .toggleText {
          font-weight: 400;
          font-size: 14px;
          color: #333333;
          margin-right: 12px;
        }
      }

      .selectBtns {
        display: flex;
        align-items: center;

        .group_btn {
          display: flex;
          justify-content: center;
          align-items: center;
          color: #28b28b;
          padding: 10px;
          height: 32px;
          box-sizing: border-box;
          border-radius: 8px;
          border: 1px solid #edeff0;
          margin-right: 8px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC, sans-serif;
          font-weight: 400;
          cursor: pointer;
          user-select: none;

          img {
            width: 36px;
            height: 20px;
            margin-left: 4px;
          }

          .text {
            transition: all 2s ease;
            overflow: hidden;
          }
        }
      }
    }
  }

  .student_list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    padding: 20px 0 0 10px;
    box-sizing: border-box;
    height: calc(100vh - 190px);
    overflow: auto;
    .student_item:hover {
      border: 0;
      box-shadow: 0 0 20px 0 rgba(0, 55, 50, 0.12);
    }
    .student_item {
      cursor: pointer;
      user-select: none;
      width: 240px;
      height: 146px;
      background: #ffffff;
      border-radius: 12px;
      border: 1px solid #ebebeb;
      position: relative;
      padding: 10px 16px 14px 16px;
      box-sizing: border-box;

      .last_name {
        top: -12px;
        left: 15px;
        position: absolute;
        width: 40px;
        height: 40px;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 22px;
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 600;
        color: #ffffff;
      }

      .item_top {
        display: flex;
        align-items: center;
        margin-left: 50px;

        .student_name {
          width: 79px;
          font-size: 18px;
          font-family: PingFangSC, PingFang SC, sans-serif;
          font-weight: 600;
          color: #333333;
          line-height: 18px;
          height: 22px;
        }

        .student_num {
          width: 84px;
          font-size: 12px;
          font-family: PingFangSC, PingFang SC, sans-serif;
          font-weight: 400;
          color: #999999;
          line-height: 17px;
          margin-left: 4px;
          text-align: right;
        }
      }

      .item_mid {
        margin-top: 16px;
        min-height: 66px;

        .mid_task {
          width: 190px;
          font-size: 14px;
          font-family: PingFangSC, PingFang SC, sans-serif;
          font-weight: 400;
          color: #666666;
          line-height: 22px;
        }

        .mid_task_next {
          width: 167px;
          margin-left: 23px;
          font-size: 14px;
          font-family: PingFangSC, PingFang SC, sans-serif;
          font-weight: 400;
          color: #666666;
          line-height: 22px;
        }

        .mid_content {
          width: 167px;
          margin-left: 23px;
          font-size: 14px;
          font-family: PingFangSC, PingFang SC, sans-serif;
          font-weight: 600;
          color: #333333;
          line-height: 22px;
        }
      }

      .item_bottom {
        width: 100%;
        margin-top: 4px;

        .el-progress {
          display: flex;
          align-items: center;
          width: 206px;
        }
      }
    }
  }

  .group_student_list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    height: calc(100vh - 190px);
    overflow: auto;

    .group_total {
      width: 100%;
      display: flex;
      align-items: center;
      height: 56px;
      padding-left: 16px;
      box-sizing: border-box;
      font-size: 16px;
      font-family: PingFangSC, PingFang SC, sans-serif;
      font-weight: bold;
      color: #333333;

      span {
        font-size: 14px;
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: 400;
        margin-left: 16px;
      }

      img {
        width: 24px;
        height: 24px;
        margin-right: 8px;
      }
    }

    .group_student_all {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      box-sizing: border-box;
      align-content: flex-start;
      padding: 20px 0 0 10px;
      .student_item:hover {
        border: 0;
        box-shadow: 0 0 20px 0 rgba(0, 55, 50, 0.12);
      }
      .student_item {
        cursor: pointer;
        user-select: none;
        width: 240px;
        height: 146px;
        background: #ffffff;
        border-radius: 12px;
        border: 1px solid #ebebeb;
        position: relative;
        padding: 10px 16px 14px 16px;
        box-sizing: border-box;

        .last_name {
          top: -12px;
          left: 15px;
          position: absolute;
          width: 40px;
          height: 40px;
          border-radius: 8px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 22px;
          font-family: PingFangSC, PingFang SC, sans-serif;
          font-weight: 600;
          color: #ffffff;
        }

        .item_top {
          display: flex;
          align-items: center;
          margin-left: 50px;

          .student_name {
            width: 79px;
            font-size: 18px;
            font-family: PingFangSC, PingFang SC, sans-serif;
            font-weight: 600;
            color: #333333;
            line-height: 18px;
            height: 22px;
          }

          .student_num {
            width: 84px;
            font-size: 12px;
            font-family: PingFangSC, PingFang SC, sans-serif;
            font-weight: 400;
            color: #999999;
            line-height: 17px;
            margin-left: 4px;
            text-align: right;
          }

          .tags_icon {
            position: absolute;
            top: -12px;
            left: 50px;
            line-height: 17px;
          }
        }

        .item_mid {
          margin-top: 16px;
          min-height: 66px;

          .mid_task {
            width: 190px;
            font-size: 14px;
            font-family: PingFangSC, PingFang SC, sans-serif;
            font-weight: 400;
            color: #666666;
            line-height: 22px;
          }

          .mid_task_next {
            width: 167px;
            margin-left: 23px;
            font-size: 14px;
            font-family: PingFangSC, PingFang SC, sans-serif;
            font-weight: 400;
            color: #666666;
            line-height: 22px;
          }

          .mid_content {
            width: 167px;
            margin-left: 23px;
            font-size: 14px;
            font-family: PingFangSC, PingFang SC, sans-serif;
            font-weight: 600;
            color: #333333;
            line-height: 22px;
          }
        }

        .item_bottom {
          width: 100%;
          margin-top: 4px;

          .el-progress {
            display: flex;
            align-items: center;
            width: 206px;
          }
        }
      }
    }

    .empty_stu {
      width: 100%;
      display: flex;
      justify-content: center;
    }
  }
}

.msg_item {
  width: 100%;
  display: flex;
  align-content: center;
  margin-top: 20px;
  cursor: pointer;
  user-select: none;

  .msg_icon {
    position: relative;

    .redtip {
      top: 0;
      right: 0;
      width: 8px;
      height: 8px;
      background: #ff3b30;
      border-radius: 4px;
      position: absolute;
    }

    img {
      width: 40px;
      height: 40px;
    }
  }

  .msgInfo {
    flex: 1;
    padding-left: 16px;
    box-sizing: border-box;

    .flex_bt {
      display: flex;
      justify-content: space-between;
      align-content: center;

      .msgName {
        flex: 1;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC, sans-serif;
        font-weight: 400;
        color: #333333;
        overflow-wrap: break-word;
        line-height: 20px;

        b {
          word-break: break-all;
          /* 允许在单词内换行 */
          font-size: 16px;
          font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
          font-weight: 600;
          color: #333333;
          line-height: 16px;
        }
      }

      .create_time {
        text-align: left;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC, sans-serif;
        font-weight: 400;
        color: #999999;
        line-height: 15px;
      }
    }

    .msgDetail {
      margin-top: 8px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #999999;
      line-height: 22px;
      border-bottom: 1px solid #ebebeb;
      padding-bottom: 4px;
      box-sizing: border-box;
    }
  }
}

.pad_10 {
  padding-right: 10px;
  padding-left: 15px;
  box-sizing: border-box;
}

.close_margin {
  margin: 0 10px 44px 24px;
}

.open_margin {
  margin: 0 0 44px 16px;
}

.group_close_margin {
  margin: 0 10px 44px 24px;
}

.group_open_margin {
  margin: 0 0 44px 16px;
}

.purple_txt {
  color: #6376e0;
}

.orange_txt {
  color: #ff7b5e;
}

.light_bg {
  box-shadow: 0 0 10px 0 rgba(222, 115, 83, 0.3);
}

.course_teach {
  width: 100%;
  height: calc(100vh - 190px);
  overflow: hidden;
  display: flex;
  align-items: center;
  border-top: 1px solid #ebebeb;

  .cursor_default {
    cursor: default;
  }

  /*左侧div样式*/
  .left {
    width: calc(20% - 1px); /*左侧初始化宽度*/
    min-width: 320px;
    max-width: calc(30% - 1px);
    height: 100%;
    padding: 20px 0 0 20px;
    box-sizing: border-box;
    overflow-y: auto;

    .topLine {
      width: 100%;
      display: flex;
      align-items: center;
      padding-right: 20px;
      box-sizing: border-box;

      .course_title {
        width: calc(100% - 60px);
        font-size: 18px;
        font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
        font-weight: 600;
        color: #333333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .btns {
        min-width: 48px;
        display: flex;
        align-items: center;
        cursor: pointer;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC, sans-serif;
        font-weight: 400;
        color: #666666;
        margin-left: 10px;

        img {
          margin: 0 4px 0 0;
          width: 16px;
          height: 16px;
        }
      }
    }

    .course_tree {
      width: 100%;
      height: calc(100vh - 250px);
      overflow: auto;
    }
  }

  /*拖拽区div样式*/
  .resize {
    cursor: col-resize;
    background-color: #edeff0;
    width: 1px;
    height: 100%;
    user-select: none; /* 禁止文本被选中 */
    /*z-index: 99999;*/
  }

  /*右侧div'样式*/
  .right {
    position: relative;
    padding: 20px 0 0;
    box-sizing: border-box;
    flex: 1;
    //width: 70%; /*右侧初始化宽度*/
    height: 100%;
    min-width: calc(100% - 30% - 6px);
    max-width: calc(100% - 320px - 1px);

    .topTips {
      padding: 0 0 0 10px;
      box-sizing: border-box;
      font-size: 14px;
      color: #eb4e3d;
    }

    .teachEmpty {
      width: 100%;
      height: 100%;
      margin: 100px auto;
    }

    .float_window {
      position: absolute;
      bottom: 50px;
      right: 30px;

      .float_item {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #ffffff;
        border: 1px solid #ebebeb;
        text-align: center;
        line-height: 40px;
        margin-bottom: 14px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .float_item:hover {
        background: #f2f2f2;
      }
    }

    .stepStudent_list {
      width: 100%;
      max-height: 100%;
      display: flex;
      align-items: flex-start;
      flex-wrap: wrap;
      overflow: auto;

      .open_margin {
        margin: 24px 0 20px 10px;
      }
      .stepStudent_item:hover {
        border: 0;
        box-shadow: 0 0 20px 0 rgba(0, 55, 50, 0.12);
      }
      .stepStudent_item {
        cursor: pointer;
        width: 200px;
        height: 98px;
        background: #ffffff;
        border-radius: 12px;
        border: 1px solid #ebebeb;
        flex-shrink: 0;
        position: relative;
        padding: 10px 10px 14px 10px;
        box-sizing: border-box;

        .last_name {
          top: -12px;
          left: 9px;
          position: absolute;
          width: 40px;
          height: 40px;
          border-radius: 8px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 22px;
          font-family: PingFangSC, PingFang SC, sans-serif;
          font-weight: 600;
          color: #ffffff;

          .TopBorder {
            width: 56px;
            height: 56px;
            position: absolute;
          }
        }

        .item_top {
          display: flex;
          align-items: center;
          margin-left: 45px;

          .student_name {
            width: 90px;
            font-size: 16px;
            font-family: PingFangSC, PingFang SC, sans-serif;
            font-weight: 600;
            color: #333333;
            line-height: 18px;
            height: 22px;
          }

          .student_num {
            width: 90px;
            font-size: 12px;
            font-family: PingFangSC, PingFang SC, sans-serif;
            font-weight: 400;
            color: #999999;
            line-height: 17px;
            margin-left: 3px;
            text-align: right;
          }
        }

        .item_bottom {
          width: 100%;
          margin-top: 20px;

          .bottom_button {
            width: 100%;
            color: #ffffff;
            text-align: center;
            height: 32px;
            line-height: 32px;
            border-radius: 8px;
            background: #6376e0;
          }

          .not_start {
            background: rgba(0,0,0,0.06);
            color: #666666;
          }

          .finish {
            background: #28b28b;
          }

          .on_exam {
            background: #2cacff;
          }

          .fail_exam {
            background: #e95756;
          }

          .to_corrected {
            background: #f7b500;
          }
        }
      }
    }

    .stepGroup_list {
      width: 100%;
      max-height: 100%;
      display: flex;
      align-items: flex-start;
      flex-wrap: wrap;
      overflow: auto;

      .notStartText {
        color: #999999;
        cursor: pointer;
      }

      .finishText {
        color: #28b28b;
        cursor: pointer;
      }

      .onExamText {
        color: #2cacff;
        cursor: pointer;
      }

      .tocorrectedText {
        color: #f7b500;
        cursor: pointer;
      }

      .finishText {
        color: #28b28b;
        cursor: pointer;
      }

      .failExamText {
        color: #e95756;
        cursor: pointer;
      }

      .group_total {
        width: 100%;
        display: flex;
        align-items: center;
        height: 56px;
        padding-left: 16px;
        box-sizing: border-box;
        font-size: 16px;
        font-family: PingFangSC, PingFang SC, sans-serif;
        font-weight: bold;
        color: #333333;

        span {
          font-size: 14px;
          font-family: PingFangSC, PingFang SC, sans-serif;
          font-weight: 400;
          margin-left: 16px;
        }

        img {
          width: 24px;
          height: 24px;
          margin-right: 8px;
        }

        .toCorrectedIcon {
          width: 16px;
          height: 16px;
          vertical-align: middle;
        }
      }

      .group_student_all {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
        align-content: flex-start;
        padding: 20px 0 0 10px;

        .group_open_margin {
          margin: 0 0 20px 10px;
        }
        .stepStudent_item:hover {
          border: 0;
          box-shadow: 0 0 20px 0 rgba(0, 55, 50, 0.12);
        }
        .stepStudent_item {
          cursor: pointer;
          width: 200px;
          height: 98px;
          background: #ffffff;
          border-radius: 12px;
          border: 1px solid #ebebeb;
          flex-shrink: 0;
          position: relative;
          padding: 10px 10px 14px 10px;
          box-sizing: border-box;

          .last_name {
            top: -12px;
            left: 9px;
            position: absolute;
            width: 40px;
            height: 40px;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 22px;
            font-family: PingFangSC, PingFang SC, sans-serif;
            font-weight: 600;
            color: #ffffff;

            .TopBorder {
              width: 56px;
              height: 56px;
              position: absolute;
            }
          }

          .item_top {
            display: flex;
            align-items: center;
            margin-left: 45px;

            .student_name {
              width: 90px;
              font-size: 16px;
              font-family: PingFangSC, PingFang SC, sans-serif;
              font-weight: 600;
              color: #333333;
              line-height: 18px;
              height: 22px;
            }

            .student_num {
              width: 90px;
              font-size: 12px;
              font-family: PingFangSC, PingFang SC, sans-serif;
              font-weight: 400;
              color: #999999;
              line-height: 17px;
              margin-left: 3px;
              text-align: right;
            }

            .tags_icon {
              position: absolute;
              top: -12px;
              left: 44px;
              line-height: 17px;
            }
          }

          .item_bottom {
            width: 100%;
            margin-top: 20px;

            .bottom_button {
              width: 100%;
              color: #ffffff;
              text-align: center;
              height: 32px;
              line-height: 32px;
              border-radius: 8px;
              background: #6376e0;
            }

            .not_start {
              background: rgba(0,0,0,0.06);
              color: #666666;
            }

            .finish {
              background: #28b28b;
            }

            .on_exam {
              background: #2cacff;
            }

            .fail_exam {
              background: #e95756;
            }

            .to_corrected {
              background: #f7b500;
            }
          }
        }
      }
    }

    .empty_stu {
      width: 100%;
      display: flex;
      justify-content: center;
    }
  }
}

.float_btns > div {
  margin-bottom: 10px;
}
</style>
